<template>
  <div id="root">
    <Test/>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from 'axios';
import Test from './components/Test';
export default {
  name:'App',
  data(){
    return {
      
    }
  },
  components:{
    Test
  },
  methods: {
    getStudents(){
      // 返回的是public中的Students中的文本内容123
      // 而不是我们想要的5000端口中的Students，因为代理服务器会先在public
      // 文件夹中寻找资源，如果资源存在，则不再转发到5000端口
      axios.get("http://localhost:8080/demo1/Students")
      .then(res => {
        console.log(res.data)
      })
      .catch(err => {
        console.error(`请求失败了，错误原因：${err.message}`); 
      })
    },
    getCars(){
      // 返回的是public中的Students中的文本内容123
      // 而不是我们想要的5000端口中的Students，因为代理服务器会先在public
      // 文件夹中寻找资源，如果资源存在，则不再转发到5000端口
      axios.get("http://localhost:8080/demo2/Cars")
      .then(res => {
        console.log(res.data)
      })
      .catch(err => {
        console.error(`请求失败了，错误原因：${err.message}`); 
      })
    },
  },
}
</script>

<style>

  html,body {
    height: 100%;
  }
  
</style>